<!-- 创作者主页 -->


<template>
  <view>
    <view class="header df jc-sb ai-c">
      <view class="df-c">
        <u-avatar
          :src="'https://p26.douyinpic.com/aweme/100x100/aweme-avatar/mosaic-legacy_2d1410000f586903c79a3.jpeg?from=3782654143'"></u-avatar>
      </view>
      <view><uni-icons type="info" size="16" @click="popup_statement"></uni-icons><text @click="popup_statement">声明</text>
      </view>
      <view class="df">
        <view class="bg_linear_gradient">默认排序</view>
        <view class="bg_linear_gradient">日期排序</view>
      </view>
    </view>
    <view class="tip">点击作品可下载无水印高清原图</view>
    <view class="tabs">
    <u-tabs :list="tab_list" @click="tab_click"></u-tabs>
  </view>
  <!-- <view class="image_list df fw-w jc-sb w100" v-if="tab_index===0">
      type=== 头像   表情  widthfix     否则空
      <image   src="https://i.ibb.co/3hTQmFt/20230529083909.jpg" mode="widthFix" @click="view_detail" />
      <image  src="https://i.ibb.co/F7jzQ6n/20230529083914.jpg" mode="widthFix" />
      <image  src="https://i.ibb.co/sKcLysq/20230529083917.jpg" mode="widthFix" />
      <image  src="https://i.ibb.co/HtZ9bt1/20230529083920.jpg" mode="widthFix" />
      <image src="https://i.ibb.co/gvWBmDk/20230529083923.jpg" mode="" />
                                        <image src="https://i.ibb.co/c8QmHdt/20230529083925.jpg" mode="" />
                                      <image src="https://i.ibb.co/N10ZhRL/20230529083928.jpg" mode="" />
                                </view>  -->

  <!-- <view style="position: relative;">
      <view v-for="(item, index) in imagelist " :key="index"
        :style="{ height: item.type != 'biaoq' ? '200px' : '124px', width: '33% ', position: 'absolute', left: `${(100 / 3) * (index % 3)}%`, top: item.top +'px' }">

        <image style="width: 100%;height: 100%;" :src="item.src" :mode="item.type == 'biaoq' ? 'widthFix' : ''"
              @load="handleImageLoad(item, index)" />
          </view>
        </view> -->




    <view class="image_list df fw-w jc-sb w100" v-if="tab_index === 1">
      <image src="https://i.ibb.co/gvWBmDk/20230529083923.jpg" mode="" />
      <image src="https://i.ibb.co/c8QmHdt/20230529083925.jpg" mode="" />
      <image src="https://i.ibb.co/N10ZhRL/20230529083928.jpg" mode="" />
    </view>
    <view class="image_list df fw-w jc-sb w100" v-if="tab_index === 2">
      <image src="https://i.ibb.co/3hTQmFt/20230529083909.jpg" mode="widthFix" />
      <image src="https://i.ibb.co/F7jzQ6n/20230529083914.jpg" mode="widthFix" />
      <image src="https://i.ibb.co/sKcLysq/20230529083917.jpg" mode="widthFix" />
      <image src="https://i.ibb.co/HtZ9bt1/20230529083920.jpg" mode="widthFix" />
    </view>

    <!-- 声明 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popue_view">
        <view class="h4">声明</view>
        <view class="text">所有素材均由创作者上传及负责，部分素材来源网络，如有侵权，请联系我们进行删除处理!</view>
        <u-button text="我知道了" color=" linear-gradient(to right, #f26dbe, #796cfc)" @click="i_know"></u-button>
      </view>
    </uni-popup>
  </view>
</template> 

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
// const columnHeights = ref<any>([])
// const getStyle = (item: any, index: number) => {
//   const columnIndex = index % 3
//   console.log(columnHeights.value);
//   const top = columnHeights.value[columnIndex] || 0;

//   return {
//     height: item.type != 'biaoq' ? '200px' : '124px', width: '33% ', position: 'absolute',
//     left: `${(100 / 3) * columnIndex}%`
//   }

// }

// const prev = ref([0,0,0])
// const handleImageLoad = (item, index) => {
//   const img = new Image();
//   img.src = imagelist.value[index].src;
//   let top = 0 
//   if(item.type == 'biaoq'){
//     top = 124
//   }else{
//     top = 200
//   }



//   img.onload = () => {
//     console.log(img.height);
//     // 更新列高度
//     const columnIndex = index % 3;
//     columnHeights.value[columnIndex] = columnHeights.value[columnIndex] || 0;

//       // 更新列高度

//       columnHeights.value[columnIndex] += top

//     imagelist.value[index].top = columnHeights.value[columnIndex] 

//     console.log(columnHeights.value);
//     prev.value = columnHeights.value
//   }

// }


const imagelist = ref([{
  src: "https://i.ibb.co/F7jzQ6n/20230529083914.jpg",
  type: "biaoq"

}, {
  type: "bizhi",
  src: "https://i.ibb.co/c8QmHdt/20230529083925.jpg",
}, {
  src: "https://i.ibb.co/sKcLysq/20230529083917.jpg",
  type: "biaoq"
}, {
  src: "https://i.ibb.co/F7jzQ6n/20230529083914.jpg",
  type: "biaoq"

}, {

  src: "https://i.ibb.co/HtZ9bt1/20230529083920.jpg",
  type: "biaoq"
}, {
  src: "https://i.ibb.co/gvWBmDk/20230529083923.jpg",
  type: "bizhi"
}, {
  type: "bizhi",
  src: "https://i.ibb.co/c8QmHdt/20230529083925.jpg",
}, {
  src: "https://i.ibb.co/3hTQmFt/20230529083909.jpg",
  type: "biaoq"
}, {
  type: "bizhi",

  src: "https://i.ibb.co/N10ZhRL/20230529083928.jpg",
},])

onLoad(() => {
  // setTimeout(function () {
  //   console.log("start pulldown");
  // }, 1000);
  // uni.startPullDownRefresh({
  //   complete: (res) => {
  //     console.log(res);
  //   },
  // });
});
onPullDownRefresh(() => {
  console.log("refresh");
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
});
interface tabType {
  id: number | string;
  name: string;
}
const tab_list = reactive<tabType[]>([
  {
    id: "1",
    name: "全部",
  },
  {
    id: "2",
    name: "壁纸",
  },
  {
    id: "3",
    name: "头像",
  },
  {
    id: "4",
    name: "表情",
  },
  {
    id: "5",
    name: "背景",
  },
  {
    id: "6",
    name: "动态壁纸",
  },
]);

const tab_index = ref<number>(0);
const tab_click = (item: any) => {
  console.log(item);
  tab_index.value = item.index;
};

// 查看图片的详情
const view_detail = () => {
  uni.navigateTo({ url: "/pagesDraw/DrawDetail/DrawDetail" });
};

// 声明
const popup = ref<any>(null)
const popup_statement = () => {
  popup.value.open('center')


};

const i_know = () => {
  popup.value.close()
}
</script>


<style scoped lang="scss">
@import '../../uni.scss';

.login {
  column-count: 3;
  column-gap: 10px;

  .item {
    margin-bottom: 10px;
  }
}


.header {
  width: 100%;
  font-size: 28rpx;

  >view:nth-child(1) {
    width: 20%;
  }

  >view:nth-child(2) {
    width: 40%;
  }

  >view:nth-child(3) {
    width: 40%;

    >view {
      width: 50%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
      // background-color: #39f;
      color: #fff;
      font-size: 24rpx;
    }
  }
}

.tip {
  font-size: 24rpx;
  padding: 18rpx 32rpx;
}

.image_list {
  margin-top: 15rpx;
  padding: 0 22rpx;
  box-sizing: border-box;

  image {
    width: 32%;
    margin: 6rpx 0;
  }
}

.popue_view {
  background-color: #fff;
  width: 70%;
  margin: auto;
  border-radius: 30rpx;
  padding: 30rpx;
  font-size: 28rpx;

  .h4 {
    font-weight: 800;
    text-align: center;
    font-size: 32rpx;
  }

  .text {
    margin: 10rpx 0;
    line-height: 48rpx;
  }

  .u-button {
    margin-top: 20rpx;
    background-image: $linearGradient;
  }
}




</style>